<template>
    <div>
        <div class="box">
            <el-button type="success" @click="pan_one = 0" class="tan">添加</el-button>
        </div>
        <template>
            <el-table :data="ass" style="width: 100%">
                <el-table-column label="ID" width="100vw">
                    <template slot-scope="scope">
                        <span>{{ scope.row.id }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="发布人" width="100vw">
                    <template slot-scope="scope">
                        <span>{{ scope.row.username }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="内容" width="200vw">
                    <template slot-scope="scope">
                        <span>{{ scope.row.contents }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="标题" width="200vw">
                    <template slot-scope="scope">
                        <span>{{ scope.row.titles }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="时间" width="200vw">
                    <template slot-scope="scope">
                        <span>{{ scope.row.cretatime }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="类型" width="100vw">
                    <template slot-scope="scope">
                        <span>{{ scope.row.type }}</span>
                    </template>
                </el-table-column> 

                <el-table-column label="点赞" width="100vw">
                    <template slot-scope="scope">
                        <span>{{ scope.row.num }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="handleEdit(scope.row.id)">点赞</el-button>
                        <el-button size="mini" type="warning" @click="detail(scope.row.id)">详情</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>

        <div class="box_one" v-if="pan == 1">
            <div class="box_tow">
                <br>
                <p>id:{{are.id}}</p>
                <p>发布人:{{are.username}}</p>
                <p>内容:{{are.contents}}</p>
                <p>上传时间:{{are.cretatime}}</p>
                <p>标题:{{are.titles}}</p>
                <p>类型:{{are.type}}</p>
                <p>点赞:{{are.num}}</p>
              <button @click="pan = 22" class="tan">关闭</button>
            </div>
        </div>
        
        <div class="box_one" v-if="pan_one == 0">

            <div class="box_shan">
                <br>
                <br>
                <el-input type="textarea" style="width: 25vw;" :rows="2" placeholder="请输入新闻的内容" v-model="textarea"></el-input>
                <br>
                <br>
                <el-input placeholder="请输入新闻的标题" style="width: 25vw;" v-model="input" clearable></el-input>
                <br>
                <br>
                <el-input placeholder="请输入新闻时间" style="width: 25vw;" v-model="input_one" clearable></el-input>
                <br>
                <br>
                <el-input placeholder="请输入用户名昵称" style="width: 25vw;" v-model="name" clearable></el-input>
                <br>
                <br>
                <template class="dan">
                    <el-radio v-model="radio" label="1">首页</el-radio>
                    <el-radio v-model="radio" label="2">咨询</el-radio>
                    <el-radio v-model="radio" label="3">生活</el-radio>
                    <el-radio v-model="radio" label="4">其他</el-radio>
                  </template>
                <br>
                <br>
                <el-input placeholder="请输入点赞数量" style="width: 25vw;" v-model="num" clearable></el-input>
                <br>
              <button @click="ji()" class="tan_one">添加</button>
              <button @click="pan_one = 1" class="tan_one">取消</button>
            </div>
      
        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
            ass: [],
            pan:0,
            are:{},
            pan_one:1,
            textarea:'',
            input:'',
            input_one:'',
            name:'',
            radio:'1',
            num:''
        }
    },
    mounted() {
        this.add()
    },
    methods: {
        add() {
            this.$apiGet('https://goods.zzgoodqc.cn/index.php/index/News/newsList').then(res => {
                this.ass = res.data.data
            })
        },
        handleEdit(i){
            let add = {
                    id: i
                }
                this.$apiGet('https://goods.zzgoodqc.cn/index.php/index/News/addNum', add).then(red => {
                    console.log(red);
                })
                this.add()
        },
        handleDelete(i) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                let add = {
                    id: i
                }
                this.$apiGet('https://goods.zzgoodqc.cn/index.php/index/News/delNews', add).then(red => {
                    console.log(red);
                    this.add()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        detail(i){
            this.pan = 1
            let add={
                id:i
            }
            this.$apiPost('https://goods.zzgoodqc.cn/index.php/index/News/getNewsByid',add).then(res=>{
                this.are = res.data
            })
        },
        ji(){
            let ass={
                contents:this.textarea,
                titles:this.input,
                cretatime:this.input_one,
                username:this.name,
                type:this.radio,
                num:this.num
            }
            this.$apiPost('https://goods.zzgoodqc.cn/index.php/index/News/addNews',ass).then(red=>{
                this.add()
                this.$message({
                    type: 'success',
                    message: red.msg
                });
            })
        }
    }
}

</script>

<style scoped>
.box {
    width: 100%;
    height: 10vh;
    text-align: center;
}
.box_shan{
    width: 50vw;
    height: 60vh;
    background: #fff;
    margin: auto;
    text-align: center;
    margin-top: 20vh;
}

.tan_one {
    width: 5vw;
    height: 5vh;
    margin-top: 3vh;
  }

.box_tow {
    width: 50vw;
    height: 40vh;
    background: #fff;
    margin: auto;
    text-align: center;
    margin-top: 30vh;
  }
  
  .box_one {
    width: 100%;
    height: 99vh;
    background: rgba(33, 30, 30, 0.8);
    position: absolute;
    top: 0px;
    left: 0px;
  }

.tan {
    width: 6vw;
    height: 5vh;
}
</style>